
<template>
  <div class="flh_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
        <div slot="main" class="industryData">
            <div class="dataShow">
                <top-logo-title>
                    <div slot="title">洛阳运营数据</div>
                </top-logo-title>
                <div class="chart">

                    <div class="leftView">
                        <!-- 成交类型占比 -->
                        <div class="macroEconomy">
                            <main-title>
                                <span slot="title">成交类型占比</span>
                            </main-title>
                            <div class="dashBoardCon">
                                <pie-chart slot="main" v-model=" fixtureTypeArr" :option="merchantsOfOption"></pie-chart>
                            </div>
                        </div>
                        <!-- 月度业务成交趋势 -->
                        <div class="secondHandHousePrice">
                            <main-title>
                                <span slot="title">月度业务成交趋势</span>
                            </main-title>
                            <div style="width:466px;height:290px;">
                                <line-chart slot="main" v-model="secondHandArr" :option="resoldApartmentOption" :chartStyle="'width:456px;height:212px;min-height:240px;'"></line-chart>
                            </div>
                        </div>
                        <!-- 房产开发数量与流动人口趋势对比 -->
                        <div class="houseNumHouseContrast">
                            <main-title>
                                <span slot="title">区域成交对比-年度</span>
                            </main-title>
                            <bar-chart slot="main" v-model="resoldApartmentArr" :option="populationOption" :chartStyle="'width:455px;height:215px;min-height:280px;'"></bar-chart>
                        </div>
                    </div>

                    
                        <!-- 成交量 交易额 -->
                        <div class="tradingVolume">
                          <!-- 成交量 -->
                          <div class="turnover">
                              <p class="title">成交量<span class="unit">(套)</span></p>
                              <div class="main">
                                <img src="../../../../../static/img/flh/icon_2.png" alt="">
                                <div class="content">
                                  <p>本月<span>4,221</span></p>
                                  <p>累计<span>6,342,234</span></p>
                                </div>
                              </div>
                          </div>
                          <!-- 交易额 -->
                          <div class="turnover">
                              <p class="title">交易额<span class="unit">(万元)</span></p>
                              <div class="main">
                                <img src="../../../../../static/img/flh/icon_3.png" alt="">
                                <div class="content">
                                  <p>本月<span>3,523</span></p>
                                  <p>累计<span>6,342,234</span></p>
                                </div>
                              </div>
                          </div>
                        </div>
                        <!-- 各区域业务分配情况 -->
                        <div class="functionalDistribution">
                            <main-title>
                                <span slot="title">各区域业务分配情况</span>
                            </main-title>
                            <div class="contentView">
                              <div class="map">
                                <operation-map :mapStyle="'position:absolute;top:0;left:0;width:'"></operation-map>
                              </div>
                              <div class="bottomView">
                                <div class="collect">
                                  <img src="../../../../../static/img/flh/icon_1.png" alt="">
                                  <p> <span>666</span> <span>门店数量</span> </p>
                                </div>
                                <em></em>
                                <div class="hair">
                                  <img src="../../../../../static/img/flh/icon_6.png" alt="">
                                  <p> <span>369</span> <span>客户数量</span> </p>
                                </div>
                                <em></em>
                                <div class="belox">
                                  <img src="../../../../../static/img/flh/icon_5.png" alt="">
                                  <p> <span>18,893</span> <span>房源数量</span> </p>
                                </div>
                              </div>
                            </div>
                        </div>

                    <div class="rightView">
                        <!-- 月度交易额趋势 -->
                        <div class="tradeSize">
                            <main-title>
                                <span slot="title">月度交易额趋势</span>
                            </main-title>
                            <bar-chart v-model="marketShareArr" :chartStyle="'width:455px;min-height:240px;'" :option="barChartOption"></bar-chart>
                        </div>
                        <!-- 区域交易额占比 -->
                        <div class="marketShare">
                            <main-title>
                                <span slot="title">区域交易额占比</span>
                            </main-title>
                            <div style="width:424px;height:225px;">
                              <pie-chart :chartStyle="'min-width:225px;min-height:265px'" v-model="shopOrderArr" :option="shopOrderOption"></pie-chart>
                            </div>
                        </div>
                        <!-- 客源与房源增长趋势 -->
                        <div class="incomeHouseContrast">
                            <main-title>
                                <span slot="title">客源与房源增长趋势</span>
                            </main-title>
                            <line-chartss v-model="tradingInArr" :chartStyle="'width:450px;min-height:260px;'" :option="lineChartOption"></line-chartss>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </bg-lay-out>
  </div>
</template>

<script>
import bgLayOut from "@/components/bgLayOut/index";
import topLogoTitle from "@/components/flh/dataKanban/topLogoTitle";
import mainTitle from "@/components/flh/dataKanban/mainTitle";
import radarChart from "@/components/flh/radarChart";
import lineChartss from "@/components/Charts/lineChartss";
import lineChart from "@/components/Charts/lineChart";
import pieChart from "@/components/Charts/pieChart.vue";
import barChart from "@/components/Charts/barChart";
import operationMap from "@/components/flh/operationLYMap"
export default {
  components: {
    bgLayOut,
    topLogoTitle,
    mainTitle,
    radarChart,
    lineChartss,
    lineChart,
    pieChart,
    barChart,
    operationMap
  },
  data() {
    return {
      secondHandArr: [], // 月度业务成交趋势
      fixtureTypeArr: [], // 成交类型占比
      marketShareArr: [], // 市场占有率
      resoldApartmentArr: [], // 二手房
      shopOrderArr: [],
      tradingInArr: [], // 客源与房源增长趋势
      merchantsOfOption: {
        color: ["#FF614A", "#2BE951", "#1EC2FF", "#FFD81A"],
        center: ["40%", "50%", "45%", "50%"],
        legend: {
          show: false
        },
        showLine: true,
        showLabel: true
      },
      resoldApartmentOption: {
        grid: {
          top: 30
        },
        color: "#FFD81A",
        tooltip: {
          show: false
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(255, 216, 26, 0.4)",
        endColor: "rgba(255, 216, 26, 0)"
      },
      populationOption: {
        grid: {
          top: 30
        },
        color: "#1EC2FF",
        tooltip: {
          show: false
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 45,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "#1EC2FF",
        endColor: "#108BF3"
      },
      barChartOption: {
        grid: {
          top: 30
        },
        color: "#23DECD",
        tooltip: {
          show: false
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "#23DECD",
        endColor: "#55EEA8"
      },
      shopOrderOption: {
        color: ["#FFD81A", "#2BE951", "#1EC2FF"],
        radius: ["40%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        startAngle: 250,
        hidePieMargin: false,
        showLine: true,
        showLabel: true,
        legend: {
          show: false,
          left: 20
        }
      },
      comparisonOption: {
        grid: {
          top: 50
        },
        legend: {
          top: 200
        },
        hideLineColor: false,
        showSymbol: "none",
        color: ["#2BE951", "#1EC2FF"],
        startColor: ["rgba(43,233,81,0.4)", "rgba(30,194,255,0.4)"],
        endColor: ["rgba(43,233,81,0.1)", "rgba(30,194,255,0.1)"],
        legendColor: "#55EEA8",
        tooltip: {
          show: false
        },
        showLabel: true,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#55EEA8"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: "#55EEA8"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      },
      lineChartOption: {
        grid: {
          top: 30,
          left: "10%"
        },
        legend: {
          top: 200
        },
        hideLineColor: false,
        showSymbol: "none",
        color: ["#2BE951", "#1EC2FF"],
        startColor: ["rgba(30,194,255,0.4)", "rgba(43,233,81,0.4)"],
        endColor: ["rgba(30,194,255,0)", "rgba(43,233,81,0)"],
        legendColor: "#55EEA8",
        tooltip: {
          show: false
        },
        showLabel: true,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#55EEA8"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: "#55EEA8"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      }
    };
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      var fixtureTypeArr = [
        {
          name: "租赁",
          value: 2323
        },
        {
          name: "三方",
          value: 3323
        },
        {
          name: "代办",
          value: 4323
        },
        {
          name: "新房",
          value: 4523
        }
      ];
      this.$set(this, "fixtureTypeArr", fixtureTypeArr);
      var secondHandArr = [
        {
          name: "1月",
          value: 345
        },
        {
          name: "2月",
          value: 312
        },
        {
          name: "3月",
          value: 267
        },
        {
          name: "4月",
          value: 209
        },
        {
          name: "5月",
          value: 190
        },
        {
          name: "6月",
          value: 121
        },
        {
          name: "7月",
          value: 98
        },
        {
          name: "8月",
          value: 87
        },
        {
          name: "9月",
          value: 107
        },
        {
          name: "10月",
          value: 147
        },
        {
          name: "11月",
          value: 167
        },
        {
          name: "12月",
          value: 207
        }
      ];
      this.$set(this, "secondHandArr", secondHandArr);
      var resoldApartmentArr = [
        {
          name: "瀍河一区",
          value: 345
        },
        {
          name: "涧西二区",
          value: 312
        },
        {
          name: "涧西三区",
          value: 267
        },
        {
          name: "涧西一区",
          value: 209
        },
        {
          name: "老城一区",
          value: 190
        },
        {
          name: "洛龙二区",
          value: 121
        },
        {
          name: "洛龙三区",
          value: 98
        },
        {
          name: "洛龙五区",
          value: 87
        }
      ];
      this.$set(this, "resoldApartmentArr", resoldApartmentArr);
      var marketShareArr = [
        {
          name: "1月",
          value: 800
        },
        {
          name: "2月",
          value: 1000
        },
        {
          name: "3月",
          value: 1300
        },
        {
          name: "4月",
          value: 1500
        },
        {
          name: "5月",
          value: 1800
        },
        {
          name: "6月",
          value: 2000
        },
        {
          name: "7月",
          value: 800
        },
        {
          name: "8月",
          value: 1000
        },
        {
          name: "9月",
          value: 1300
        },
        {
          name: "10月",
          value: 1500
        },
        {
          name: "11月",
          value: 1800
        },
        {
          name: "12月",
          value: 2000
        }
      ];
      this.$set(this, "marketShareArr", marketShareArr);
      var shopArr = [
        {
          name: "西工一区",
          value: "43990"
        },
        {
          name: "西工二区",
          value: "82457"
        },
        {
          name: "洛龙一区",
          value: "34234"
        }
      ];
      this.$set(this, "shopOrderArr", shopArr);
      var tradingInArr = [
        {
          name: "1月",
          list: [
            {
              name: "客源",
              value: 124
            },
            {
              name: "房源",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "2月",
          list: [
            {
              name: "客源",
              value: 156
            },
            {
              name: "房源",
              value: 199
            }
          ],
          value: 16
        },
        {
          name: "3月",
          list: [
            {
              name: "客源",
              value: 219
            },
            {
              name: "房源",
              value: 211
            }
          ],
          value: 16
        },
        {
          name: "4月",
          list: [
            {
              name: "客源",
              value: 256
            },
            {
              name: "房源",
              value: 134
            }
          ],
          value: 16
        },
        {
          name: "5月",
          list: [
            {
              name: "客源",
              value: 300
            },
            {
              name: "房源",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "6月",
          list: [
            {
              name: "客源",
              value: 188
            },
            {
              name: "房源",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "7月",
          list: [
            {
              name: "客源",
              value: 124
            },
            {
              name: "房源",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "8月",
          list: [
            {
              name: "客源",
              value: 156
            },
            {
              name: "房源",
              value: 199
            }
          ],
          value: 16
        },
        {
          name: "9月",
          list: [
            {
              name: "客源",
              value: 219
            },
            {
              name: "房源",
              value: 211
            }
          ],
          value: 16
        },
        {
          name: "10月",
          list: [
            {
              name: "客源",
              value: 256
            },
            {
              name: "房源",
              value: 134
            }
          ],
          value: 16
        },
        {
          name: "11月",
          list: [
            {
              name: "客源",
              value: 300
            },
            {
              name: "房源",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "12月",
          list: [
            {
              name: "客源",
              value: 188
            },
            {
              name: "房源",
              value: 166
            }
          ],
          value: 16
        }
      ];
      this.$set(this, "tradingInArr", tradingInArr);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

.industryData {
  .dataShow {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(75, 98, 50, 72, 1);

      & .leftView {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        // 宏观经济指数
        .macroEconomy {
          .dashBoardCon {
            width: 480px;
            height: 192px;
            .dashBoardChartCon {
              // position: absolute;
              // top: 0;
              // left: 0
            }
          }
        }

        // 月度业务成交趋势
        .secondHandHousePrice {
          position: absolute;
          top: 340px;
          left: 0;
          z-index: 1;
        }

        // 房产开发数量与流动人口趋势对比
        .houseNumHouseContrast {
          position: absolute;
          top: 650px;
          left: 0;
          z-index: 1;
        }
      }
      & 
        
        // 成交量交易额
        .tradingVolume {
        position: absolute;
        top: 110px;
        left: 535px;
        z-index: 1;
        width: 714px;
        display: flex;
        justify-content: space-between;
        .turnover {
          width: 50%;
          height: 100%;
          .title {
            color: #55eea8;
            @include blod(22px);
            .unit {
              font-size: 16px;
            }
          }
          .main {
            display: flex;
            width: 100%;
            align-items: center;
            padding-top: 10px;
            img {
              width: 68px;
              height: 68px;
            }
            .content {
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-left: 20px;
              p {
                display: flex;
                align-items: flex-end;
                margin-bottom: 10px;
                color: #55eea8;
                font-size: 22px;
                span {
                  margin-left: 10px;
                  color: #FFD81A;
                  line-height: 0.8;
                }
              }
              p:nth-of-type(1) span {
                @include din(50px);
              }
              p:nth-of-type(2) span {
                @include din(38px);
              }
            }
          }
        }
      }
      .functionalDistribution {
        position: absolute;
        bottom: 30px;
        left: 535px;
        z-index: 1;
        .contentView {
          width: 714px;
          height: 568px;
          margin-top: 15px;
          background: rgba($color: #000000, $alpha: 0.2);
          padding: 10px;
          border: 1px solid #55eea8;
          .map {
            position: relative;
            width: 100%;
            height: 416px;
            background: white;
          }
          .bottomView {
            width: 100%;
            height: 92px;
            margin: 24px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            em {
              width: 1px;
              height: 92px;
              background-color: rgba(#55EEA8, 0.3);
            }
            p {
              display: flex;
              flex-direction: column;
            }
            p span:nth-of-type(1) {
              color: #FFD81A;
              line-height: 1;
              @include din(34px);
            }
            p span:nth-of-type(2) {
              color: #55EEA8;
              font-size: 18px;
              line-height: 1;
            }
            .collect {
              display: flex;
              img {
                width: 53px;
                height: 53px;
                margin-right: 5px;
              }
            }
            .hair {
              display: flex;
              img {
                width: 55px;
                height: 51px;
                margin-right: 5px;
              }
            }
            .belox {
              display: flex;
              img {
                width: 58px;
                height: 54px;
                margin-right: 5px;
              }
            }
          }
        }
      }
      & .rightView {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;

        // 月度交易额趋势
        .tradeSize {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
        }

        // 区域交易额占比
        .marketShare {
          position: absolute;
          top: 340px;
          right: 25px;
          z-index: 1;
        }

        // 客源与房源增长趋势
        .incomeHouseContrast {
          position: absolute;
          top: 650px;
          right: 0;
          z-index: 1;
        }
      }
    }
  }
}
</style>

